<template>
  <div class="CustomerList">
    <!-- header -->
    <new-header title="班级详情列表" />

    <div class="cus-center">
      <!-- search -->
      <div class="top">
        <h1 class="top-title">初二一班</h1>
        <div class="right-body">
          <el-button type="success" plain>导入学生</el-button>
          <el-button type="success" @click="open_model">新建学生</el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        :header-cell-style="{background:'#f0f2f5',color:'black'}"
        class="table"
        :data="table_list"
        style="width: 100%"
        fit
        highlight-current-row
        min-height="650"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          fixed
          prop="name"
          label="班级名称"
          min-width="100"
        >
          <template slot-scope="scope">
            <p class="name_word">{{ scope.row.name }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="class_n"
          label="年纪序号"
          min-width="150"
        />
        <el-table-column
          prop="class_n"
          label="班级序号"
          min-width="100"
        />
        <el-table-column
          prop="class_n"
          label="男生人数"
          min-width="100"
        />
        <el-table-column
          prop="class_n"
          label="女生人数"
          min-width="100"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">

            <div class="table-btn">
              <div
                class="btn-item blud"
              >详情</div>

              <div
                class="btn-item"
                @click="delete_item(scope.row)"
              >删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagin"
        background
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.size"
        layout="prev, pager, next, sizes,  jumper,total"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>

    <!-- dialog1 -->
    <plain-dialog
      width="700px"
      title="请输入学生信息"
      :common_dialog="this.common_dialog"
      @hand_click_false="resetForm('ruleForm')"
      @hand_click_true="submitForm('ruleForm')"
      @hand_close="resetForm('ruleForm')"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号" prop="number">
            <el-input v-model="ruleForm.number" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学籍号" prop="xjnumber">
            <el-input v-model="ruleForm.xjnumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="家长手机号" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期" prop="date1">
            <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身高" prop="height">
            <el-input v-model="ruleForm.height" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体重" prop="weight">
            <el-input v-model="ruleForm.weight" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安静心率" prop="xinglv">
            <el-input v-model="ruleForm.xinglv" />
          </el-form-item>
        </el-col>

      </el-form>
    </plain-dialog>
    <!-- dialog2 -->
    <plain-dialog
      width="500px"
      title="请输入班级信息"
      :common_dialog="this.common_dialog2"
      @hand_click_false="common_dialog_false"
      @hand_click_true="common_dialog_true"
      @hand_close="hand_close_common"
    >
      <p>是否确认删除此学生？</p>
    </plain-dialog>
  </div>
</template>

<script>
import PlainDialog from '@/components/Dialog/PlainDialog.vue'
import NewHeader from '@/components/NewHeader.vue'
export default {
  name: 'ClassDetailList',
  components: {
    NewHeader,
    PlainDialog
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      table_list: [
        {
          name: '张一鸣',
          sex: '男',
          number: '123456',
          time: '2020-0608--52',
          work: '协和医院',
          belong: 'xie协和医院组'
        }
      ],
      currentPage: 1,
      size: 10,
      total: 100,
      common_dialog: false,
      common_dialog2: false,

      ruleForm: {
        name: '',
        number: '',
        xjnumber: '',
        phone: '',
        sex: '',
        date1: '',
        height: '',
        weight: '',
        xinglv: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入学号', trigger: 'change' }
        ],
        xjnumber: [
          { required: true, message: '请输入学籍号', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入家长手机号', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        height: [
          { required: true, message: '请选择身高', trigger: 'change' }
        ],
        weight: [
          { required: true, message: '请选择体重', trigger: 'change' }
        ],
        xinglv: [
          { required: true, message: '请选择心率', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.get_customer_list()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
          this.common_dialog = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.common_dialog = false
    },

    delete_item() {
      this.common_dialog2 = true
    },
    open_model() { // 打开遮罩
      this.common_dialog = true
    },
    hand_close_common(val) { // dialog遮罩取消
      this.common_dialog2 = val
    },
    common_dialog_false(val) { // dialog点击取消
      this.common_dialog2 = val
      alert('你点击了取消')
    },
    common_dialog_true(val) { // dialog点击确定
      this.common_dialog2 = val
      // alert('你点击了确定')
    },
    handleSelectionChange(val) {
      console.log(val)
      // alert(`你选择了${val}`)
    },
    get_customer_list() {
      new Promise((resolve, reject) => {
      /* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
        setTimeout(() => {
        /* 因无真实数据，当前方法模拟数据 */
          const list = []

          for (let i = this.currentPage * this.size; i < this.size * (this.currentPage + 1); i++) {
            list.push({
              number: i,
              name: `初一${i + 1}班`,
              class_n:`${i + 1}`,
              nansheng_n:i,
              nvsheng_n:i,
              sex: '35:44',
              time: new Date().getTime(),
              work: `第${i + 1}`,
              belong: `第${i + 1}`,
              db: `达标${i + 1}`
            })
          }

          // 将请求接口返回的数据传递给 Promise 对象的 then 函数。
          resolve({ list })
        }, 1000)
      }).then(res => {
        console.log(res)
        // this.total = res.list.length
        this.table_list = res.list
      })
    },
    // 页面size改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.get_customer_list()
    },
    // 页面page改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.get_customer_list()
    },
    go_info(info) {
      console.log(info)
      this.$router.push({ path: `/history/history-detail/${info.number}` })
    }

  }
}
</script>

<style lang="scss" scoped>
.item{
  margin: 0 auto;
  display: flex;
  width: fit-content;
  margin-bottom: 20px;
  span{
    width: 80px;
    line-height: 40px;
  }
  .input{
    width: 300px
  }
}
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #1890FF;
      font-size: 14px;
    }
  }

}
.CustomerList{
  position: relative;
  padding: 25px;
  .cus-center{
    background-color: white;
    padding: 25px;
    .top{
      display: flex;
      justify-content: space-between;
      .top-title{
        font-size: 16px;
        font-weight: bold;
        line-height: 36px;
      }
      .right-body{
        height: 40px;
        display: flex;
        justify-content: space-between;
      }
    }
    .table{
      margin-top: 30px;
      text-align: left;
      .table-btn{
        width: fit-content;
        margin: 0 auto;
        display: flex;
        .btn-item{
          cursor: pointer;
          color: #42b983;
          font-size: 14px;
          padding: 0 10px;

          &.blud{
            color: #46a6ff;
            border-right: 1px solid #e0e0e0;
          }
        }
      }
    }
  }
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #42b983;
    border-color: #42b983;
}
::v-deep .el-checkbox__inner:hover,::v-deep .el-checkbox__inner:focus{
  border-color: #42b983;
  outline-color:#42b983;
}
.name_word{
  color: #46a6ff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #41cb89;   // 进行修改背景和字体
  color: #fff;
}
.pagin{
  margin-top: 25px;
  text-align: right;
}
</style>
